<template>
  <div class="collection">

    <van-list v-model="loading" @load="onLoad" :finished="finished" :error.sync="err" error-text="加载失败，点击这里重试">
      <van-checkbox-group v-model="result" ref="checkboxGroup">

        <div class="Box" v-for="(item,index) in list" :key="index" @click="jumpToProduct(item)">
          <van-swipe-cell @open="changeBtn(1,index)" @close="changeBtn(0,index)">
            <van-checkbox v-if="checked" :name="item.product_id" checked-color="#ee0a24"></van-checkbox>
            <div class="image">
              <van-image :src="`${resourceURL}${item.imageurl}`" fit='cover' />
            </div>
            <div class="right">
              <div class="name">{{item.product_name}}</div>
              <div class="bottom">
                <div class="price"><span style="font-size:14px">￥</span>{{ item.mprice }}</div>
                <van-button v-show="!checked&&item.check" @click.stop="jump(item)">进入店铺</van-button>

              </div>
            </div>
            <template #right>
              <van-button type="danger" @click.stop="checked=true">批量<br />删除</van-button>
              <van-button type="primary" @click.stop="cancalChoose(item)">取消<br />收藏</van-button>
            </template>

          </van-swipe-cell>
        </div>
        <van-empty description="暂无商品收藏" v-if="list.length==0" />

      </van-checkbox-group>
    </van-list>
    <van-goods-action v-if="checked">
      <van-checkbox v-model="allChecked" checked-color="#ee0a24">全选</van-checkbox>
      <div class="btnList">
        <van-button type="danger" @click="cancel" class="cancel">取消</van-button>
        <van-button type="primary" class="delete" @click="cancelSelect">删除已选</van-button>
      </div>

    </van-goods-action>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant';
export default {
  data () {
    return {
      active: 0,
      loading: false,
      finished: false,
      goodsList: [],
      checked: false,
      err: false,
      foodsList: [],
      list: [],
      result: [],
      page: 0,
      data: [
        {
          product_id: 187, //商品ID
          product_name: "这是个团餐", //商品名
          imageurl:
            "uploads/productimages/20221109/2ad4f65ae37f3cc97aa30c30a39d0364.jpg", //商品封面
          p_s_name: "好吃的", //团餐类型用到的团餐规格名称
        },
        {
          product_id: 187, //商品ID
          product_name: "这是个团餐", //商品名
          imageurl:
            "uploads/productimages/20221109/2ad4f65ae37f3cc97aa30c30a39d0364.jpg", //商品封面
          p_s_name: "好吃的", //团餐类型用到的团餐规格名称
        },

      ],
    };
  },
  methods: {
    //取消选择
    cancel () {
      this.checked = false
      this.result = []
      this.$refs.checkboxGroup.toggleAll();
    },
    //加载下一页
    onLoad () {



      this.page++

      this.GetCollectionList();


    },
    //切换导航栏
    onClick (name) {

      this.list = []
      switch (name) {
        case 0:
          if ((this.goodsList.length == 0)) {
            this.GetCollectionList(1);
          }
          break;
        case 1:
          if ((this.foodsList.length == 0)) {
            this.GetCollectionList(1);
          }
          break;
      }
    },
    //获取商品收藏列表
    GetCollectionList () {
      this.loading = true
      let active1 = Number(this.active) + 1
      this.$axios
        .get(this.$api.GetCollectionList, {
          params: {
            page: this.page,
            type: active1,
          },
        })
        .then((res) => {

          this.loading = false
          if (res.data.code == 1) {

            if (res.data.data.data.length == 0) {
              this.finished = true
            } else {
              this.finished = false
            }

            this.list = this.list.concat(res.data.data.data)
            this.list.forEach((ele) => {

              ele.check = true

            })
          } else {
            this.err = true;
            this.loading = false;
          }
        });
    },
    //转化时间戳
    getTime (time) {

      var now = new Date(parseInt(time)),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)

    },
    //取消收藏商品
    cancelCollect () {
      this.$axios.post(this.$api.DelCollections, {
        ids: this.result
      }).then((res) => {
        if (res.data.code == 1) {
          this.page = 1
          this.list = []
          this.GetCollectionList(this.goodsPage);

          Toast.success('删除成功');
        } else {
          Toast.fail('删除失败');
        }
      });
    },
    //删除选中
    cancelSelect () {
      Dialog.confirm({
        title: '提示',
        message: '确认删除该商品？',
      }).then(() => {
        this.cancelCollect()
      }).catch(() => {
        // on cancel
      });
    },
    //删除特定
    cancalChoose (item) {
      this.result.push(item.product_id)

      Dialog.confirm({
        title: '提示',
        message: '确认删除该商品？',
      }).then(() => {
        this.cancelCollect()
      }).catch(() => {
        // on cancel
        this.result = []
      });
    },
    changeBtn (flag, index) {

      if (flag) {
        this.list[index].check = false
      } else {
        this.list[index].check = true
      }

      this.$forceUpdate()

    },
    jump (item) {
      this.$router.push({ name: 'store', query: { id: item.shop_id } });
    },
    jumpToProduct (item) {

      this.$router.push({
        name: 'product',
        query: {
          id: item.product_id
        }

      })
    },
  },
  watch: {},
  computed: {
    allChecked: {
      get () {
        return this.result.length == this.list.length;
      },
      set (param) {
        if (param) {
          this.$refs.checkboxGroup.toggleAll(true);
        } else {
          this.$refs.checkboxGroup.toggleAll();
        }
      },
    }
  },
  created () {
    // this.onLoad()
  },
  mounted () { },

};
</script>
<style scoped lang="less">
/deep/ .van-tabs__nav {
  background: transparent;
}
.van-swipe-cell {
  width: 100%;
  height: 100%;
}
.image {
  /deep/.van-image {
    width: 88px;
    height: 88px;
  }
}
/deep/.van-swipe-cell__wrapper {
  display: flex;
  height: 100%;

  .van-checkbox {
    margin-right: 12px;
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 12px;
    height: 92px;
    .bottom {
      display: flex;
      justify-content: space-between;
      button {
        width: 74px;
        height: 24px;
        background: #ff7733;
        border-radius: 12px 12px 12px 12px;
        font-size: 12px;
        white-space: nowrap;
        color: #fff;
      }
    }
  }
  .name {
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列

    color: #303030;
  }
  .price {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    color: #fb2b2c;
    height: 24px;
    line-height: 34px;
  }
  .van-swipe-cell__right {
    .van-button--normal {
      height: 100%;
      width: 50px;
      font-size: 12px;
    }
  }
}
.Box {
  width: 343px;

  background: #ffffff;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #f2f2f2;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  margin: 0 auto;
  margin-top: 12px;
  padding: 12px;
  box-sizing: border-box;
}

.van-goods-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 17px;
  height: 60px;
  .btnList {
    .cancel {
      width: 90px;
      height: 32px;
      border-radius: 16px 16px 16px 16px;
      opacity: 1;
      border: 1px solid #b9b9b9;
      color: #b9b9b9;
      background: #fff;
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    }
    .delete {
      width: 90px;
      height: 32px;
      font-size: 12px;
      background: #b60102;
      border-radius: 16px 16px 16px 16px;
      margin-left: 8px;
      color: #ffffff;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    }
  }
}
</style>
